<template>
    
  <div class="chat-container">
    <!-- 消息展示区域（可滚动） -->
     <button @click="goIndex()" class="send-button-back">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
      </button>
    <div class="message-list">
      <div 
        v-for="(msg, index) in messageHistory" 
        :key="index" 
        :class="['message-bubble', msg.role]"
      >
        <div v-html="parseMarkdown(msg.content)"> </div>
      </div>
      
    </div>

    <!-- 输入区域（底部固定） -->
    <div class="input-area">
        
      <input 
        type="text" 
        v-model="userinput" 
        placeholder="输入消息..." 
        @keyup.enter="main"
        class="chat-input"
      >
      <button @click="main" class="send-button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
      </button>
      
    </div>
  </div>
</template>

<script>
import OpenAi from 'openai'
import { reactive,toRefs } from 'vue'
import { getSessionStorage } from '@/common';
import { useRouter } from 'vue-router';
import { marked } from 'marked';
export default{
setup(){
    const router = useRouter();
    const openai=new OpenAi({
        apiKey:"sk-",
        baseURL:"https://dashscope.aliyuncs.com/compatible-mode/v1",
        dangerouslyAllowBrowser: true,
        
    });
    const state=reactive({
        usercontent:"",
        userinput:"你好！",
        modelcontent:"",
        messageHistory:[],
    });
    function goIndex(){
        router.push('/index');
    }
    function parseMarkdown(content){
        return marked(content);
    }
    async function main() {
        state.usercontent=state.userinput;
        state.userinput="";
        state.messageHistory.push({role: "user", content: state.usercontent});

        const completion=await openai.chat.completions.create({
            model:"qwen-plus",
            messages:[
                { role: "system", content: "你是一个擅长解答健康咨询的对话助手，对话使用中文，尽量使用纯文本输出。" },
                ...state.messageHistory
            ],
        });
        console.log(completion.choices[0].message.content);
        state.modelcontent=completion.choices[0].message.content;
        state.messageHistory.push({role: "assistant", content: state.modelcontent});
        state.usercontent="";
    }
    const userdata=getSessionStorage("userdata");
    if(!userdata){
        alert("请先登录");
        router.push("/");
        return {};
    }
    main();
    return{
        ...toRefs(state),
        main,
        goIndex,
        parseMarkdown,
    }
  }
}
</script>

<style scoped>
/* 容器布局 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #dfdae6;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* 消息列表区域 */
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 消息气泡通用样式 */
.message-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: fadeIn 0.3s ease;
  /*white-space: pre-wrap; /* 保留\n并自动换行 */
  /*word-break: break-word; /* 长单词强制换行 */
}

/* 用户消息（右侧） */
.user {
  align-self: flex-end;
  background-color: #0ec536;
  color: white;
  border-bottom-right-radius: 4px;
}

/* AI消息（左侧） */
.assistant {
  align-self: flex-start;
  background-color: rgb(0, 0, 0);
  color: #ffffff;
  border-bottom-left-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* 输入区域 */
.input-area {
  display: flex;
  padding: 16px;
  background-color: #dfdae6;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.chat-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.send-button {
  margin-left: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #11e759;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.send-button:hover {
  background-color: #1d4ed8;
}

.send-button svg {
  width: 24px;
  height: 24px;
}

.send-button-back {
  margin-left: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #dfdae6;
  color: rgb(17, 1, 1);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.send-button-back:hover {
  background-color: #1d4ed8;
}

.send-button-back svg {
  width: 24px;
  height: 24px;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>